<script setup>
import { onMounted, reactive, ref, watch } from "vue"
import { deleteTableDataApi, getTableDataApi, saveTableDataApi } from "@/api/product/product_spec"
import { Search, Refresh, CirclePlus, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { getTableDataAll } from "@/api/product/product"

defineOptions({
  // 命名当前组件
  name: "productInventory"
})

const loading = ref(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()


//#region 查
const tableData = ref([])
const productData = ref([])
const searchFormRef = ref(null)
const searchData = reactive({
  keyword: "",
  product_id: 0,
})

const getTableData = () => {
  loading.value = true
  getTableDataApi({
    page: paginationData.currentPage,
    keyword: searchData.keyword,
    product_id: searchData.product_id
  })
    .then((data) => {
      paginationData.total = data.total
      tableData.value = data.items
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}
//#endregion

onMounted(() => {
  loading.value = true
  getTableDataAll({ keyword: '' })
    .then((data) => {
      productData.value = data
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
})

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-form ref="searchFormRef" :inline="true" :model="searchData">
            <el-form-item prop="product_id"  style="width: 200px;">
              <el-select v-model="searchData.product_id" placeholder="请选择所属商品">
                <el-option key="0" label="全部商品" :value="0" />
                <el-option v-for="item in productData" :key="item.product_id" :label="item.title" :value="item.product_id" />
              </el-select>
            </el-form-item>
            <el-form-item prop="keyword" label="关键字">
              <el-input v-model="searchData.keyword" placeholder="请输入关键字" />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" border>
          <el-table-column prop="product_title" label="商品名称" align="left" width="200" />
          <el-table-column prop="spec_name" label="规格" align="left" width="180" />
          <el-table-column prop="model_name" label="型号" align="left" width="180" />
          <el-table-column prop="left_number" label="现有库存数量" align="left" width="180" />
          <el-table-column prop="supplier_title" label="供货商" align="left" width="180" />
          <el-table-column prop="batch_number" label="商品批号" align="left" width="180" />
          <el-table-column prop="production_date" label="生产日期" align="left" width="180" />
          <el-table-column prop="expiration_date" label="失效日期" align="left" width="180" />
          <el-table-column prop="warehouse_title" label="仓库名称" align="left" width="180" />
          <el-table-column prop="last_updated" label="最后更新时间" align="left" width="180" />
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination background :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
          :total="paginationData.total" :page-size="paginationData.pageSize" :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
